<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.js"></script>
  <script src="js/china.js"></script>
</head>
<body>
<div id="box2-1-1" style="width: 873px; height: 400px"></div>
</body>

<script>
  var box3_2=echarts.init(document.getElementById("box3-2"));
  var xdata3=["1993年", "1994年", "1995年", "1996年", "1997年", "1998年", "1999年", "2000年", "2001年", "2002年", "2003年", "2004年", "2005年", "2006年", "2007年", "2008年", "2009年", "2010年", "2011年", "2012年", "2013年", "2014年", "2015年", "2016年", "2017年", "2018年", "2019年"]
  var KSMC6=[938.3, 966.6, 1087.8, 1076.1, 1229.5, 1314.74, 1354.34, 1405, 1485.25, 1507.47, 1574.63, 1819.47, 1902.66, 1922.78, 2020.81, 1887.85, 1959.89, 2023.12, 2057.44, 2107.65, 2154.94, 2176.32, 2197.68, 2117.08, 2095.11, 2003.39, 1934,]
  var KSMC7=[84.48, 97.86, 108.7, 114.08, 119.55, 123.17, 132.16, 127.95, 127.48, 131.13, 132.52, 138.6, 145.99, 153.71, 162.28, 167.23, 170.9, 175.82, 178.7, 180.61, 180.77, 180.33, 178.3, 174.05, 165.51, 150.36, 139.17,]
  var option3= {
    title: {
      text: '1978-2022年农用柴油和农药使用量',
      textStyle:{
        fontSize: 15,
        color:"#FFF"
      },
      left:"6%",
      top:5,
    },
    legend:{
      color:"#FFF"
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '10%',
      containLabel: true
    },
    yAxis: [
      {
        type: 'value',
        axisLabel:{
          show: false,
        },
        splitLine:{show: false},
      }
    ],
    dataZoom: [//滑动条
      {
        xAxisIndex: 0,
        show: false,
        type: 'slider',
        startValue: 0,
        endValue:5,
      }
    ],
    xAxis: [
      {
        type: 'category',
        inverse:false, //是否是反向坐标轴
        data: xdata3,
        axisLabel:{
          margin: 15,
          color:"#FFF"
        },
        axisLine:{
          show:false,
        },
        axisTick: {
          show: false
        },

      }
    ],
    series: [
      {
        name: '农药使用量(万吨)',
        type: 'bar',
        barWidth: 40,
        color:'#248def',
        data: KSMC7,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inside',
              textStyle: {
                //数值样式
                color: '#FFF',
                fontSize: 12,
              },
            },
          },
        },
      },
      {
        name: '农用柴油使用量(万吨)',
        type: 'bar',
        barWidth: 40,
        data: KSMC6,
        color: "#3b4ce8",
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inside',
              textStyle: {
                //数值样式
                color: '#FFF',
                fontSize: 12,
              },
            },
          },
        },
      },
    ]
  };
  box3_2.setOption(option3);
  //通过定时器的方式刷新，改变statrValue，endValue
  var c=setInterval(function () {
    // 每次向后滚动一个，最后一个从头开始。
    if (option3.dataZoom[0].endValue == KSMC6.length ) {
      option3.dataZoom[0].endValue = 6;
      option3.dataZoom[0].startValue = 0;
    }
    else {
      option3.dataZoom[0].endValue = option3.dataZoom[0].endValue + 1;
      option3.dataZoom[0].startValue = option3.dataZoom[0].startValue + 1;
    }
    box3_2.setOption(option3);
  }, 2000);
</script>
</html>